/* enum */
import ComponentNameEnum from '@model/enum/ComponentNameEnum'
/* scss */
import '@src/component/common/BaseAlert/BaseAlert.scss'
/* utils */
import { createNamespace } from '@src/util'
import { isFunction } from '@src/util/type'
/* vue */
import { CreateElement } from 'vue'
import { ScopedSlot } from 'vue/types/vnode'

const [createComponent, bem] = createNamespace(ComponentNameEnum.BaseAlert)

export enum BaseAlertTypeEnum {
  Success = 'success',
  Info = 'info',
  Warning = 'warning',
  Error = 'error',
}

export type BaseAlertProps = {
  type: BaseAlertTypeEnum
}

const BaseAlertType = {
  [BaseAlertTypeEnum.Success]: BaseAlertTypeEnum.Success,
  [BaseAlertTypeEnum.Info]: BaseAlertTypeEnum.Info,
  [BaseAlertTypeEnum.Warning]: BaseAlertTypeEnum.Warning,
  [BaseAlertTypeEnum.Error]: BaseAlertTypeEnum.Error
}

const BaseAlertIconMap: Record<BaseAlertTypeEnum, string> = {
  [BaseAlertTypeEnum.Success]: 'iconfont icon-wancheng',
  [BaseAlertTypeEnum.Info]: 'iconfont icon-info',
  [BaseAlertTypeEnum.Warning]: 'iconfont icon-warning-circle-fill',
  [BaseAlertTypeEnum.Error]: 'iconfont icon-delete'
}

const BaseAlertColorMap: Record<BaseAlertTypeEnum, { color: string, backgroundColor: string }> = {
  [BaseAlertTypeEnum.Success]: {
    backgroundColor: '#f0f9eb',
    color: '#67c23a'
  },
  [BaseAlertTypeEnum.Info]: {
    backgroundColor: '#f4f4f5',
    color: '#909399'
  },
  [BaseAlertTypeEnum.Warning]: {
    backgroundColor: '#fdf6ec',
    color: '#e6a23c'
  },
  [BaseAlertTypeEnum.Error]: {
    backgroundColor: '#fef0f0',
    color: '#f56c6c'
  }
}

function BaseAlert(h: CreateElement, props: BaseAlertProps, slots: Record<string, ScopedSlot | undefined | Function>) {
  const type = props?.type || ''
  let classNames: string[] = [
    ComponentNameEnum.BaseAlert,
    `${ComponentNameEnum.BaseAlert}-${BaseAlertType[type]}`
  ]
  let defaultSlot = slots.default
  
  if (isFunction(slots.default)) {
    const slotDefaultFunction = slots.default as Function
    defaultSlot = slotDefaultFunction()
  }
  
  const alertStyle = {
    ...(BaseAlertColorMap[type] || {})
  }
  
  return (
    <div class={classNames} style={alertStyle}>
      <i class={BaseAlertIconMap[type]}></i>
      { defaultSlot }
    </div>
  )
}

BaseAlert.props = {
  type: {
    type: String,
    default: BaseAlertTypeEnum.Info
  }
}

export default createComponent<BaseAlertProps>(BaseAlert)
